<template>
    <div class="common-layout">
        <el-container class="main-container">
            <el-header>
                <h1>three &nbsp;&nbsp;&nbsp;黎明体检报告管理系统</h1>
                <div class="divout">
                    <p>医生：{{ doctor.realName }}</p>
                    <el-button size="small" style="margin-left:8px ;background-color: #cf656e;color: white;"
                        @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <h4>体检客户查询</h4>
                    <el-form :model="users" label-width="auto" style="max-width: 600px">
                        <el-form-item label="手机号码">
                            <el-input v-model="users.userId" />
                        </el-form-item>
                        <el-form-item label="姓名">
                            <el-input v-model="users.userName" />
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-radio-group v-model="users.sex">
                                <el-radio value="1">男</el-radio>
                                <el-radio value="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="套餐类型">
                            <el-select v-model="users.setmealType" placeholder="请选择套餐">
                                <el-option v-for="setmeal in setmealArr" :key="setmeal.smId" :label="setmeal.name"
                                    :value="setmeal.smId" />
                            </el-select>
                        </el-form-item>

                        <el-form-item label="体检日期">
                            <el-col :span="24">
                                <el-date-picker v-model="users.orderDate" type="date" placeholder="请选择体检日期"
                                    style="width: 100%" />
                            </el-col>
                        </el-form-item>
                        <el-form-item label="是否归档">
                            <el-radio-group v-model="users.orderState">
                                <span class="custom-radio" :class="{ 'active': users.orderState === '3' }">
                                    <el-radio value="3">未归档</el-radio>
                                </span>
                                <span class="custom-radio" :class="{ 'active': users.orderState === '2' }">
                                    <el-radio value="2">已归档</el-radio>
                                </span>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" style="margin-left:65px ;"
                                @click="onSubmitAndReset">查询</el-button>
                            <el-button type="warning" @click="resetting">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-aside>
                <el-main>
                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column fixed prop="orderId" label="预约编号" width="120" />
                        <el-table-column prop="userId" label="手机号" width="150" />
                        <el-table-column prop="userName" label="真实姓名" width="140" />
                        <el-table-column prop="sexStr" label="性别" width="80" />
                        <el-table-column prop="setmealName" label="体检套餐类型" width="180" />
                        <el-table-column prop="hospitalName" label="体检医院" width="250" />
                        <el-table-column prop="orderDate" label="体检日期" min-width="120" />
                        <el-table-column fixed="right" style="margin-right:0 ;" label="操作" width="120">
                            <template #default="{ row }">
                                <el-button link type="primary" size="small" @click="toEdit(row)">{{ row.state ==
                                    3 ? '编辑' : '查看' }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="total">
                        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize"
                            :current-page="page" style="margin-top: 20px;" @current-change="handleCurrentChange" />
                        <p class="totaltext">当前第{{ page }} 页/ 共{{ total }}条数据</p>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
import { reactive, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { watch } from 'vue';
import { getSessionStorage, setSessionStorage } from "@/common";
export default {
    setup() {
        const router = useRouter();
        const route = useRoute();

        const state = reactive({
            doctor: getSessionStorage('doctors'),
            total: 0,
            currentPage: 1,
            page: 1,
            pageSize: 10,
            users: {
                userId: '',
                userName: '',
                orderDate: '',
                orderState: '3',
                sex: '',
                smId: '',
                sexStr: '',
                setmealType: ''
            },
            setmeal: {
                type: ''
            },
            tableData: [],
            setmealArr: [],

        });

        function logout() {
            setSessionStorage('doctors', null);
            router.push({ path: '/' });
        }


        onSubmit();
        function onSubmitAndReset() {
            restpage();
            // listOrder();
            onSubmit();
        }

        function onSubmit() {

            axios.post('/api/orders/conditionList', { ...state.users, page: state.page, pageSize: state.pageSize, smId: state.users.setmealType, orderDate: state.users.orderDate, state: state.users.orderState })
                .then((response) => {
                    console.log(response.data)
                    state.tableData = response.data.data;
                    state.total = response.data.total;
                }).catch((error) => {
                    console.log(error);
                });


        }

        function toEdit(row) {
            const orderId = row.orderId;



            // router.push({ path: '/reportContent', query: { orderId: orderId } });
            axios
                .post("/api/checkItem/createReportModel", {
                    orderId: orderId,
                })
                .then((response) => {
                    console.log(response.data)
                    // if (response.data == 1) {
                    router.push({ path: '/reportContent', query: { orderId: orderId, state: row.state } });
                    // } else {
                    //     alert('生成报告模板失败！');
                    // }
                })
                .catch((error) => {
                    console.error(error);
                });
        }

        function resetting() {
            // 重置查询条件
            state.users = {
                userId: "",
                userName: "",
                sex: "",
                smId: "",
                setmealType: "",
                orderDate: "",
                orderState: ""
            };
            state.setmeal.type = "";
            // 重置页码
            state.page = 1;
            // 重新加载订单数据
            // listOrder();
            onSubmit();
        }
        function restpage() {
            state.page = 1;
        }




        function handleCurrentChange(newPage) {
            state.page = newPage;

            onSubmit();



        }




        watch(() => ({ page: state.page, pageSize: state.pageSize }), () => {

            onSubmit();

        });


        function setmealList() {
            console.log()
            axios.post('/api/setmeal/selectBySex', { "type": state.users.sex })
                .then((response) => {
                    console.log(response.data)
                    state.setmealArr = response.data.data;
                }).catch((error) => {
                    console.log(error);
                });
        }
        watch(() => state.users.sex, () => {
            setmealList();
        }, { immediate: true });


        return {
            ...toRefs(state),
            onSubmit,
            toEdit,
            resetting,
            // listOrder,
            onSubmit,
            // handleCurrentChange1,
            handleCurrentChange,
            setmealList,
            restpage,
            onSubmitAndReset,
            logout

        }
    }
};


</script>


<style scoped>
.el-header {
    background-color: #B3C0D1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #1c51a1;
}

.el-aside {

    background-color: #d2dce5;
    box-sizing: border-box;
    padding: 20px;
    width: 250px;
    margin: 0 auto;
}

.el-form-item {
    margin-top: 10px;
    margin-bottom: 15px;
}

.el-input:focus {
    border-color: #007bff;
    /* 输入框聚焦时的边框颜色 */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.el-button {
    /* margin-left: 68px; */

    padding: 10px;
    border-radius: 5px;
}


.el-button-primary {

    background-color: #007bff;
    /* 提交按钮颜色 */
    color: white;
}

.el-button-primary:hover {
    background-color: #0056b3;
    /* 提交按钮悬停颜色 */
}

.el-button.cancel {
    background-color: #f0f0f0;
    /* 重置按钮颜色 */
    color: #333;
}

.el-button.cancel:hover {
    background-color: #e0e0e0;
    /* 重置按钮悬停颜色 */
}

.el-main {
    background-color: #e9eef2;
}

.radio-item input {
    display: none;
    /* 隐藏原始单选框 */
}

.custom-radio {
    display: inline-block;
    padding: 10px 15px;
    /* 内边距 */
    border: 1px solid #007bff;
    /* 边框颜色 */
    border-radius: 5px;
    /* 圆角 */
    background-color: #f0f8ff;
    /* 背景颜色 */
    color: #007bff;
    /* 文字颜色 */
    transition: background-color 0.3s, border-color 0.3s;
    /* 过渡效果 */
}

.radio-item input:checked+.custom-radio {
    background-color: #007bff;
    /* 选中时的背景颜色 */
    color: white;
    /* 选中时的文字颜色 */
    border-color: #0056b3;
    /* 选中时的边框颜色 */
}

.el-radio {
    position: relative;
    margin-right: 20px;
    /* 间距 */
    cursor: pointer;
    /* 鼠标悬停时显示手型 */
}



.custom-radio {
    display: inline-block;
    border: 1px solid #d2dce5;
    /* 边框颜色 */
    background-color: #d2dce5;
    /* 背景颜色 */
    color: #007bff;
    /* 文字颜色 */
    padding: 2px 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s;
}

.custom-radio.active {
    border-color: #409EFF;
    /* 点击后边框颜色 */
}

.totaltext {
    display: inline-block;

    margin-left: 5px;
    margin-top: 30px;
    font-size: small;
    color: #409EFF;
}


.main-container {
    min-height: 100vh;
    /* Minimum height is 100% of the viewport */
    max-height: 100vh;
    /* Maximum height is also 100% of the viewport */
}

.total {
    display: flex;



}

.divout {

    display: flex;
}
</style>



<!-- 
.custom-radio {

display: inline-block;
padding: 5px 5px;
/* 内边距 */
border: 1px solid #d2dce5;
/* 边框颜色 */
border-radius: 5px;
/* 圆角 */
background-color: #d2dce5;
/* 背景颜色 */
color: #007bff;
/* 文字颜色 */
transition: background-color 0.3s, border-color 0.3s;
/* 过渡效果 */
} -->